<template>
  <div class="pop" @click.self="hidePop">
    <div class="pop__main">
      <div class="pop__head">
        <slot name="head">
          <h4 class="pop__title" v-if="title">{{title}}</h4>
        </slot>
      </div>
      <div class="pop__body">
        <slot name="body">
          <div class="pop__content" v-if="content">{{content}}</div>
        </slot>
      </div>
      <div class="pop__foot">
        <slot name="foot">
          <button class="pop__btn" @click="hidePop" v-if="showBtn">确定</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pop',
  props: {
    title: {
      type: String
    },
    content: {
      type: String
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    hidePop () {
      this.$emit('hidePop')
    }
  }
}
</script>

<style scoped lang="scss">
.pop {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;

  &__main {
    background-color: #fff;
    border-radius: 0.1rem;
    left: 50%;
    margin: 0 0 0 -1.58rem;
    padding: 0.17rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.16rem;
  }

  &__head,
  &__foot {
    text-align: center;
  }
  &__foot {
    padding-bottom: 0.1rem;
  }

  &__title {
    color: #1c9de1;
    font-size: 0.16rem;
    font-weight: bold;
  }

  &__body {
    padding: 0.2rem;
  }

  &__content {
    color: #666;
    font-size: 0.14rem;
  }

  &__btn {
    background-color: #1C9DE1;
    border-radius: 0.18rem;
    color: #fff;
    font-size: 0.13rem;
    height: 0.35rem;
    padding: 0 0.36rem;
  }
}
</style>
